<template>
  <div>
    {{this.copy.title}}
  </div>
  <div class="text-5xl">
    h2
  </div>
</template>

<script>
import { reactive, readonly, ref, toRefs} from 'vue'

export default {
  name: 'Level1',
  setup() {
    // const title = ref('title')
    const creativeObj = reactive({title: 'title', description: 'description', count: 0})
    const stateAsRefs = toRefs(creativeObj)
    const copy = readonly(creativeObj)
    creativeObj.count++
    stateAsRefs.count.value++
    console.log(stateAsRefs.count.value, 'count')
    return {
      creativeObj,
      copy
    }
  },
  mounted () {
    this.creativeObj.title = 'create title'
  }
}
</script>
